<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
	<link href="../webjars/bootstrap/3.3.7-1/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/material-teal/easyui.css" />
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/icon.css" />
	<link rel="stylesheet" href="../static/personForm.css">
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
	<script type="text/javascript" src="../static/personForm.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#t_teacher").datagrid({
			idField:'id',
			title: '老师列表',
			width: '100%',
			fitColumns: true,
			striped: true,
			pagination:true,
			rownumbers: true,
			loadMsg: '数据正在加载...',
			sortName:'id',
			sortOrder:'desc',
			url: 'listTeacher',
			pagination: true,
			pageSize:10,
			pageList: [ 10, 20, 25, 50],
			frozenColumns: [
				[
					{field: 'ck',width: 50,checkbox: true}
				]
			],
			columns:[
				[
					{field: 'id',title: '唯一标识',width: 50,align: 'center'}, 
					{field:'username',title:'用户名',width: 100,align: 'center'},
					{field:'name',title:'姓名',width: 100,align: 'center'},
					{field:'sex',title:'性别',width: 100,align: 'center'},
					{field:'age',title:'年龄',width: 100,align: 'center'},
					{field:'phone',title:'联系电话',width: 100,align: 'center'},
					{field:'ranmek',title:'备注',width: 100,align: 'center'},
					{field: 'reset',title: '操作',width: 100,align: 'center',formatter:add}	
				]
			],
			toolbar:[
				{
					text:'添加老师',
					iconCls:'icon-add',
					handler:function(){
						$('#mydislog').dialog({
							title:'添加老师',
							model:true
						});
						$('#myform input').val("");
						$('#mydialog').dialog('open');
						$('#man').val('男');
						$('#girl').val('女');
					}
				},{
					text:'修改老师',
					iconCls:'icon-edit',
					handler:function(){
						var arr = $('#t_teacher').datagrid('getSelections');
						if(arr.length!=1){
							$.messager.show({
								title:'提示信息',
								msg:'只能选中一行记录进行修改！'
							});
						}else{
							$('#mydislog').dialog({
								title:'修改老师',
								model:true
							});
							//$('#myform input').val("");
							$('#mydialog').dialog('open');
							$('#myform').get(0).reset();
							$('#myform').form('load',{
								id:arr[0].id,
								username:arr[0].username,
								password:arr[0].password,
								name:arr[0].name,
								sex:arr[0].sex,
								age:arr[0].age,
								phone:arr[0].phone,
								ranmek:arr[0].ranmek
							});
						}
					}
				},{
					text:'删除老师',
					iconCls:'icon-remove',
					handler:function(){
						var arr = $('#t_teacher').datagrid('getSelections');
						if(arr.length <= 0){
							$.messager.show({
								title: '提示信息',
								msg: '至少选中一行记录进行删除！'
							});
						}else{
							$.messager.confirm('提示信息', '确认删除'+arr.length+'条数据？', function(data){
								if(data){
									var ids = '';
									for(var i = 0; i < arr.length; i++){
										ids+=arr[i].id+',';
									}
										ids = ids.substring(0, ids.length-1);
										$.post('delete',{ids:ids},function(){
											$('#t_teacher').datagrid('reload');
											$('#t_teacher').datagrid('unselectAll');
											$.messager.show({
												title: '提示信息',
												msg: '操作成功！'
											});
										});
								}else{
									return;
								}
							});
						}
					}
				}
			]
		});
		$('#btn1').click(function(){
			if($('#myform').form('validate')){
				$.ajax({
					type:'post',
					url:'teacherSave',
					cache:false,
					data:$('#myform').serialize(),
					success:function(data){
						$('#mydialog').dialog('close');
						$('#t_teacher').datagrid('reload');
						$.messager.show({
							title:'提示信息',
							msg:'操作成功！'
						});
					}
				});
			}else{
				$.messager.show({
					title:'提示信息',
					msg:'验证不通过，不能保存！'
				});
			}
		});					
		$("#btn2").click(function(){
			$("#mydialog").dialog('close');
		});	
		$('#searchbtn').click(function(){
			$('#t_teacher').datagrid('load',serializeForm($('#mysearch').form()));
		});
		$('#clearbtn').click(function(){
			$('#mysearch').form('clear');
			$("#t_teacher").datagrid('load', {});
		});
		$('#username').textbox({
			onChange:function(value){
				$.post('only',{username:value},function(data){
					$("#username_error").html(data);			
				});
			}
		});
	});
	function add(value,row,index){
		return "<a class='easyui-linkbutton' onclick='reset("+row.id+");'>重置密码</a>";
	}
	function reset(id){
		if(confirm("确定重置密码？")){
			$.post('reset', {id: id}, function(data){
				alert(data);
			});
		}
	}
	//js方法，序列化表单，因为查询不传值去后台，无法辨认传的参数是否有
	function serializeForm(form){
		var obj = {};
		$('#id').val("1");
		$.each(form.serializeArray(), function(index){
			if(obj[this['name']]){
				obj[this['name']] = obj[this['name']] + ',' + this['value'];
			}else{
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	}
/* 	function only(value){
		$.post('only',{username:value},function(data){
			$("#username_error").html(data);			
		});
	} */
	</script>
</head>
<body>
	<div style="padding: 20px;">
		<form id="mysearch">
			<input type="hidden" name = "id" id="id">
			<div class="col-md-3">			
				<div class="input-group">
					<span class="input-group-addon">用户名</span>
					<input type="text" class="form-control" name="username" placeholder="用户名">
				</div>
			</div>
			<div class="col-md-3">			
				<div class="input-group">
					<span class="input-group-addon">姓名</span>
					<input type="text" class="form-control" name="name" placeholder="姓名">
				</div>
			</div>
			<div class="btn-group">
				<button id="searchbtn" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> 查询</button>
				<button id="clearbtn" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> 清空</button>
			</div>
		</form>
	</div>
	
<table id="t_teacher"></table>
	
		<div id="mydialog"  class="easyui-dialog" closed=true title="添加老师">
			<form id = "myform" class="custom-form"> 
				<input type="hidden" name="id">
				<p><label>用户名：</label><input type="text" name="username" id="username" class="easyui-textbox" data-options="required:true,prompt:'请输入用户名'" th:onchange="'javascript:only(this.value);'"></p>
				<span id="username_error" style="color: red;margin-right: 50px;"></span>
				<p><label>密码：</label><input type="text" data-options="prompt:'默认密码111'" disabled="disabled" name="" class="easyui-textbox"></p>
				<p><label>姓名：</label><input type="text" name="name" id="name" class="easyui-textbox" data-options="required:true,prompt:'请输入姓名'"></p>
				<p style="margin-right: 82px;"><label>性别：</label>
					<input type="radio" checked  name="sex" value="男" id="man"> 男
					<input type="radio" name="sex" value="女" id="girl"> 女
				</p>
				<p><label>年龄：</label><input type="text" name="age" id="age" class="easyui-textbox" data-options="required:true,prompt:'请输入年龄'"></p>
				<p><label>联系电话:</label><input type="text" name="phone" id="phone" class="easyui-textbox" data-options="required:true,prompt:'请输入电话'"></p>
				<p><label>备注：</label><input type="text" name="ranmek" class="easyui-textbox" data-options="prompt:'请输入备注'"></p>
				<p>
				<a id="btn1" class="easyui-linkbutton" iconCls="icon-save">确定</a>
				<a id="btn2" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
				</p>
			</form>
		</div>
</body>
</html>